<template>
  <template v-if="!confirm">
    <el-form
      ref="ruleFormRef"
      label-suffix=":"
      label-position="left"
      :model="_data"
      size="small"
    >
      <el-form-item style="width: 100%">
        <div style="margin-bottom: 10px">
          <el-input v-model="search" placeholder="输入关键字搜索">
            <template #append>
              <el-button style="color: var(--el-color-primary)" icon="Search" />
            </template>
          </el-input>
        </div>

        <el-radio-group v-model="selectRowId" style="width: 100%">
          <el-table
            ref="singleTableRef"
            :data="filterTableData"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
            max-height="240px"
            border
          >
            <el-table-column width="55">
              <template #default="scope">
                <el-radio :label="scope.row.networkId">
                  <template #default>{{}}</template>
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="子网" property="networkId" />
            <el-table-column label="所属VPC" property="vpcName" />
            <el-table-column label="IPV4网段" property="ipSegment" />
          </el-table>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </template>
  <template v-else>
    {{ modelValue?.networkId }}
  </template>
</template>
<script setup lang="ts">
import type { FormView } from "@commons/components/ce-form/type";
import { computed, onMounted, ref, watch } from "vue";
import _ from "lodash";
import type { ElTable } from "element-plus";

interface NetworkConfig {
  vpcId: string;
  networkId: string;
  vpcName: string;
  networkName: string;
}

const props = defineProps<{
  modelValue: any;
  allData?: any;
  allFormViewData?: Array<FormView>;
  field: string;
  formItem?: FormView;
  otherParams: any;
  confirm?: boolean;
}>();

const emit = defineEmits(["update:modelValue", "change"]);
const singleTableRef = ref<InstanceType<typeof ElTable>>();
const selectRowId = ref();

// 搜索
const search = ref();
const filterTableData = computed(() =>
  props.formItem?.optionList?.filter(
    (data: NetworkConfig) =>
      !search.value ||
      data.networkName
        .toLowerCase()
        .includes(search.value.toLowerCase().replace(/\s/g, "")) ||
      data.vpcName
        .toLowerCase()
        .includes(search.value.toLowerCase().replace(/\s/g, ""))
  )
);

const _data = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

/**
 * 触发 change 事件
 */
watch(
  () => _data.value,
  (value) => {
    if (value != null) {
      emit("change");
    }
  },
  { deep: true }
);

/**
 * 列表选中
 */
const currentRow = computed<NetworkConfig | undefined>({
  get() {
    return _.find(
      props.formItem?.optionList,
      (o: NetworkConfig) => o.networkId === _data.value?.networkId
    );
  },
  set(value) {
    _data.value = value;
  },
});

function handleCurrentChange(val: NetworkConfig | undefined) {
  currentRow.value = val;
  selectRowId.value = val?.networkId;
  emit("change");
}

onMounted(() => {
  selectRowId.value = currentRow.value?.networkId;
});
</script>
<style lang="scss" scoped></style>
